import React, { useState, useEffect } from 'react'
import './index.scss'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtList, AtListItem, AtPagination, AtActivityIndicator } from 'taro-ui'
import { searchVideoRankLists, getVideoRankLists } from '../../../../api/index'
import VideoCard from '../../../../components/video/component/videoCard/index'
import { getPersonalVideo } from '../../../../api/index'

interface VideoListArrResType {
  title: string
  description: string
  pic: string
  name: string
  view: number
  aid: number
  mid: number
  danmaku: number
  like: number
  favourite: number
  reply: number
  tagList: string[]
}

export default (props) => {
  const { id } = props
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [loading, setloading] = useState(true)
  const [videoList, setVideoList] = useState<VideoListArrResType[]>([])

  useEffect(() => {
    setloading(true)
    ;(async () => {
      const {
        data: { data }
      } = await getPersonalVideo({
        id,
        pn: 1,
        ps: 10,
        sort: 1
      })
      if (data.videoList) setVideoList(data.videoList)
      setTotal(data.total)
      setloading(false)
    })()

    setCurrent(1)
  }, [id])

  const tapToDetails = (
    id,
    mid,
    pic,
    title,
    desc,
    danmaku,
    like,
    reply,
    favourite,
    view,
    tagList
  ) => {
    Taro.navigateTo({
      url: `/packageB/video/index?tagList=${tagList}&id=${id}&mid=${mid}&pic=${pic}&title=${title}&danmaku=${danmaku}&like=${like}&reply=${reply}&favourite=${favourite}&view=${view}&desc=${desc}`
    })
  }

  const setLists = () => {
    // 防止异常情况
    // if (!videoList) setvideoList([])

    if (videoList.length !== 0)
      return videoList.map((item) => {
        return (
          <View
            onClick={() =>
              tapToDetails(
                item.aid,
                item.mid,
                item.pic,
                item.title,
                item.description,
                item.danmaku,
                item.like,
                item.reply,
                item.favourite,
                item.view,
                item.tagList
              )
            }
          >
            <VideoCard
              imgUrl={item.pic}
              name={item.name}
              title={item.title}
              description={item.description}
              watchNum={item.view}
            ></VideoCard>
          </View>
        )
      })
  }

  const onPageChange = (data) => {
    let { current } = data
    setloading(true)
    setCurrent(current)
    ;(async () => {
      const {
        data: { data }
      } = await getPersonalVideo({
        id,
        pn: current,
        ps: 10,
        sort: 1
      })
      if (data.videoList) setVideoList(data.videoList)
      setTotal(data.total)
      setloading(false)
    })()
  }

  return (
    <View className="at-list-wrap">
      {loading ? (
        <AtActivityIndicator mode="center"></AtActivityIndicator>
      ) : (
        <View>
          <AtList>{setLists()}</AtList>
          <AtPagination
            icon
            total={total}
            pageSize={10}
            current={current}
            onPageChange={onPageChange}
          ></AtPagination>
        </View>
      )}
    </View>
  )
}

// return (
//   <View className="page-index">
//     <View className="line-chart">
//       {/* 通过 option 设置数据 */}
//       <EChart echarts={echarts} option={option} onInit={onInit} />
//     </View>
//   </View>
// )
